<template>
	<view>
		<view v-if="type == 1" class="u-skeleton">
			<u-subsection bgColor="#ffffff" :list="meanList" :current="pageType" mode="button" @change="changePage">
			</u-subsection>
			<view class="goods_list" v-if="pageType!=4">
				<view :class="loading ? 'goods_item u-skeleton-circle' : 'goods_item'" v-for="item in goodsList" :key="item.id" @click="navToGoodsDetail(item.id)">
					<image :src="item.imgUrl"></image>
					<view class="goodsName">
						<text class="goodsName" v-if="item.goodsName">{{item.goodsName}}</text>
					</view>
					<view style="display: flex;">
						<text class="price" v-if="item.price">￥{{item.price}}</text>
						<text class="number" v-if="item.number">库存 {{item.number}}</text>
						<text class="sold" v-if="item.sold">已售 {{item.sold}}</text>
					</view>
				</view>
			</view>
			<view v-else>
				<UserGoods :goodsList="goodsList"></UserGoods>
			</view>
		</view>
		<view v-else>
			<view class="goods_list" v-if="pageType!=4">
				<view class="goods_item" v-for="item in goodsList" :key="item.id" @click="navToGoodsDetail(item)">
					<image
						src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2022-12-31/105f2466-f90a-47d7-8c16-ee7556844fc0_t015fdd96070fb5a13f.jpg">
					</image>
					<view style="display: flex;margin-bottom: 5rpx;">
						<text style="font-size: 35rpx;">{{item.name}}</text>
					</view>
					<view style="display: flex;">
						<text
							style="font-size: 35;color: red;margin-right: 80rpx;">￥{{item.min_price == item.max_price ? item.min_price : item.min_price + '-'+item.max_price}}</text>
					</view>
					<text class="number">库存 {{item.stock}}</text>
					<text class="sold">已售 {{item.sales}}</text>
				</view>
			</view>
		</view>
		<!--骨架屏-->
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import UserGoods from '@/components/Shop/UserGoods.vue'
	export default {
		components: {
			UserGoods,
		},
		data() {
			return {
				//骨架屏显示
				loading: true,
				//商品列表类型，1为认养系统的，2为电商平台
				type: 1,
				goodsList: [1,2,3,4,5,6,7,8],
				meanList: [],
				pageType: 0,
				points: 0,
				goodsCategoryList: []
			}
		},
		onShow() {
			// if (this.type == 1) {
			// 	this.getGoodsCategoryList();
			// } else {
			// 	this.getGoodsList2()
			// }
		},
		methods: {
			open() {
				this.popupShow = !this.popupShow;
			},
			// 切换页面
			changePage(index) {
				this.pageType = index
				this.getGoodsList()
			},
			async getGoodsList() {
				if (this.pageType != 4) {
					const res = await this.$myRequest({
						url: 'shop/applet/getGoodsList',
						method: 'get',
						data: {
							'page': 1,
							'limit': 10,
							'categoryId': this.goodsCategoryList[this.pageType].id
						},
					})
					if (res && res.code === 0) {
						this.goodsList = res.page.list
						this.loading = false;
					}
				} else {
					const res = await this.$myRequest({
						url: 'shop/applet/getUserGoods'
					})
					if (res && res.code === 0) {
						this.goodsList = res.data
					}
				}
			},
			//电商平台，商品列表
			async getGoodsList2() {
				const res = await this.$myRequest2({
					url: 'http://172.17.40.70:8019/product',

				})
				if (res && res.code === 200) {
					this.goodsList = res.data.list;
				}
			},
			//跳转到商品详情页面
			navToGoodsDetail(data) {
				if (this.type == 1) {
					uni.navigateTo({
						url: '../goodsDetail/goodsDetail?id=' + data
					})
				} else {
					uni.navigateTo({
						url: '../goodsDetail2/goodsDetail2?goodsInfo=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			changeGoodsList() {
				if (this.type == 1) {
					this.type = 2;
					this.getGoodsList2();
				} else {
					this.type = 1;
					this.getGoodsList()
				}
			},
			//获取商品分类
			async getGoodsCategoryList() {
				const res = await this.$myRequest({
					url: 'shop/goodsCategory/list'
				})
				if (res && res.code === 0) {
					this.goodsCategoryList = res.page.list;
					this.getMeanList()
				}
			},
			//将商品分类列表商城一个只有名字的数组
			getMeanList() {
				this.meanList = []
				this.goodsCategoryList.forEach(item => {
					this.meanList.push(item.categoryName)
				})
				this.getGoodsList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.goods_list {
		display: flex;
		flex-wrap: wrap;

		.goods_item {
			margin: 20rpx 15rpx;
			width: 340rpx;

			image {
				border-radius: 10px;
				width: 100%;
				height: 300rpx;
			}

			.goodsName {
				display: flex;
				margin-bottom: 5rpx;

				text {
					font-size: 35rpx;
				}
			}

			.price {
				font-size: 40rpx;
				color: red;
				margin-right: 80rpx;
			}


			.number {
				font-size: 25rpx;
				align-self: center;
				margin-right: 20rpx;

			}

			.sold {
				font-size: 25rpx;
				align-self: center;
			}
		}
	}
</style>
